<template v-if="isAlready">
	<div v-if="isAlready">
			<module-drag v-if="drag" :model="model"  :modules="modules" :module="module" drag></module-drag>
			<module-show v-else :model="model" :modules="modules" :module="module"></module-show>
			<div style="height: 10px;"></div>
		
	</div>
</template>
<script>


import ModuleDrag from "@/views/asset/card/module/moduleDrag.vue";
import ModuleShow from "@/views/asset/card/module/moduleShow.vue";

export default {
	name: "exDragModule",
	components: {ModuleShow, ModuleDrag},
	props: {
		model: {type: Object, default: {}},
		modules: {type: Array, default: []},
		module: {type: Object, default: null},
		drag: {type: Boolean, default: false},
	},
	data() {
		return {
			isAlready: false,
		}
	},
	created() {
		if (!this.module) {
			this.module = {};
		}
		if (!this.module.id) {
			this.module.id = this.$TOOL.uuid();
		}
		if (!this.module.props) {
			this.module.props = {};
		}
		if (!this.module.widgets) {
			this.module.widgets = [];
		}
		if (!this.module.props.type) {
			this.module.props.type = this.module.type;
		}
		this.isAlready = true;
	},
	methods: {}
}
</script>

<style lang="scss">
.colItemClass {
	cursor: move;
	float: left;
	background: #fff;
	width: 100%;
	min-height: 40px;
	text-align: center;
	horiz-align: center;
	border: 1px dashed #e6e6e6;
}

.colItemClass:hover {
	border-color: rgb(71, 231, 250);
}

._colItemClass {
	padding-left: 15px;
	float: left;
	background: #fff;
	width: 100%;
	text-align: center;
	height: 40px;
	line-height: 40px;
	horiz-align: center;
}

.dragModuleDragAreaClass {
	min-height: 400px;
	background: #6eb0e10D;
}

.colClass {
	height: 35px;
}


.innerDrawer {
	:deep .el-overlay {
		position: absolute;
	}
}

:deep(.showWidgetClass .el-tooltip__trigger:focus-visible){
    outline: unset;
  }


</style>
<script setup>
</script>
